<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Jquery Ajax 01 Page</h1>
    <button onclick="doAjax()">$.ajax(...)</button>
    <button onclick="doAjaxPost()">$.post(...)</button>
    <button onclick="doAjaxGet()">$.get(...)</button>
    <button onclick="doAjaxLoad()">$("..").load(...)</button>
</div>
<div id="result"></div>
<script src="/js/jquery.min.js"></script>
<script>

    function doAjaxLoad(){
        let url="/doAjaxGet";
        //在指定为异步加载url对应的资源
        //在这里的load函数为ajax异步为get请求函数
        //语法:Load(url[,params][,callback]) callback为回调函数
        $("#result").load(url,function (){//此函数会在异步加载完成以后执行
            console.log("加载完成");
        });
        //load函数会把load()中的响应到$("#result")的位置
    }

    //基于jquery中的get函数发送ajax get请求
    function doAjaxGet(){
        //1,定义url
        let url="/doAjaxGet";
        //2,定义请求参数
        let params="";
        //3,发送get请求
        //post函数语法,post(url[,params][,callback])callback回调函数
        $.get(url,params,function (result){
            //get请求默认吧json串转成json对象
            console.log(result);
            $("#result").html(result);
        },"text");//get函数是jquery中$.ajax({})函数的一种演变形式
        //text为数据类型(dataType)
    }

    //基于jquery中的post函数发送ajax post请求
   function doAjaxPost(){
       //1,定义url
       let url="/doAjaxPost";
       //2,定义请求参数
       let params="id=200&name=oppo&remark=垃圾";
       //3,发送post请求
       //post函数语法,post(url[,params][,callback])callback回调函数
       $.post(url,params,function (result){
          $("#result").html(result);
       });//post函数是jquery中$.ajax({})函数的一种演变形式
   }

    //基于jquery中ajax函数,向服务器发送异步请求
    function doAjax(){
      //1,定义url
        let url="/doAjaxPost";
      //2,定义请求参数
        let params="id=200&name=oppo&remark=垃圾";
      //3,发送异步请求(底层会借助XMLHttpRequest对象)
        $.ajax({//这里的$符号为jquery对象,ajax()为jquery中的ajax函数
            type:"post",//不写默认是Get请求
            url:url,
            data:params,
            success:function (result){
                $("#result").html(result);//这里的result为服务端响应到客户端的结果
            }
        })
    }
</script>
</body>
</html>